<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-left">
        <div class="welcome-section">
          <h1 class="logo">Vue2 Auth System</h1>
          <p class="description">完整的登录认证脚手架</p>
          <div class="features">
            <div class="feature-item">
              <i class="el-icon-check"></i>
              <span>基于Vue2和Vue Router</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-check"></i>
              <span>完整的HTTP请求工具类</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-check"></i>
              <span>Token自动管理</span>
            </div>
            <div class="feature-item">
              <i class="el-icon-check"></i>
              <span>路由守卫保护</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="login-right">
        <div class="login-form">
          <h2 class="form-title">用户登录</h2>
          <p class="form-subtitle">请输入您的用户名和密码</p>
          
          <el-form 
            :model="loginForm" 
            :rules="loginRules" 
            ref="loginForm" 
            @submit.native.prevent="handleLogin"
            class="demo-form"
          >
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
                size="medium"
              ></el-input>
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                size="medium"
                show-password
              ></el-input>
            </el-form-item>
            
            <el-form-item>
              <el-button
                type="primary"
                :loading="loading"
                @click="handleLogin"
                class="login-button"
              >
                {{ loading ? '登录中...' : '登录' }}
              </el-button>
            </el-form-item>
          </el-form>
          
          <div class="demo-accounts">
            <h3>演示账户</h3>
            <p>管理员: admin / admin123</p>
            <p>普通用户: user / user123</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userApi } from '@/api/user'
import { setToken, setUserInfo } from '@/utils/token'

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false,
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return
        
        this.loading = true
        
        try {
          // 模拟API调用
          //const response = await this.mockLogin(this.loginForm)
          const response = await userApi.login(this.loginForm)
          if (response.code === 200) {
            // 保存token和用户信息
            setToken(response.data.token)
            setUserInfo(response.data.userInfo)
            
            this.$message.success('登录成功')
            
            // 跳转到目标页面或首页
            const redirect = this.$route.query.redirect || '/dashboard'
            this.$router.push(redirect)
          }
        } catch (error) {
          this.$message.error(error.msg || '登录失败')
        } finally {
          this.loading = false
        }
      })
    },
    
    // 模拟登录API
    mockLogin(credentials) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if ((credentials.username === 'admin' && credentials.password === 'admin123') ||
              (credentials.username === 'user' && credentials.password === 'user123')) {
            resolve({
              code: 200,
              msg: '登录成功',
              data: {
                token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.' + 
                       btoa(JSON.stringify({
                        userId: credentials.username === 'admin' ? 1 : 2,
                        username: credentials.username,
                        role: credentials.username === 'admin' ? 'admin' : 'user',
                        exp: Date.now() + 2 * 60 * 60 * 1000
                       })) + '.signature',
                userInfo: {
                  id: credentials.username === 'admin' ? 1 : 2,
                  username: credentials.username,
                  name: credentials.username === 'admin' ? '管理员' : '普通用户',
                  email: credentials.username + '@example.com',
                  role: credentials.username === 'admin' ? 'admin' : 'user'
                }
              }
            })
          } else {
            reject({
              code: 401,
              msg: '用户名或密码错误'
            })
          }
        }, 1000)
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-wrapper {
  display: flex;
  width: 100%;
  max-width: 1000px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.login-left {
  flex: 1;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 50px 40px;
  display: flex;
  align-items: center;
}

.login-right {
  flex: 1;
  padding: 50px 40px;
  display: flex;
  align-items: center;
}

.welcome-section {
  width: 100%;
}

.logo {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}

.description {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 40px;
}

.features {
  margin-top: 30px;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 15px;
}

.feature-item i {
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.2);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form {
  width: 100%;
}

.form-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.form-subtitle {
  color: #666;
  margin-bottom: 30px;
  font-size: 14px;
}

.login-button {
  width: 100%;
  height: 45px;
  font-size: 16px;
}

.demo-accounts {
  margin-top: 30px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 14px;
}

.demo-accounts h3 {
  margin-bottom: 10px;
  color: #555;
}

.demo-accounts p {
  margin: 5px 0;
  color: #666;
}

@media (max-width: 768px) {
  .login-wrapper {
    flex-direction: column;
  }
  
  .login-left, .login-right {
    padding: 30px 20px;
  }
}
</style>